<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // readystatechange  
        // load  ==> 

        // 手写Ajax 
        const url = `http://ajax-api.itheima.net/api/news`

        // 1.  创建xhr实例
        const xhr = new XMLHttpRequest()

        // 2. 设置请求方法和地址
        xhr.open('GET', url)

        // 3. 发送请求 
        xhr.send()

        // readyState === 3 的时候， 会触发progress事件
        // xhr.addEventListener('progress', () => {
        //     console.log(xhr.readyState)
        // })

        // 4. 注册回调
        // 方式一
        // ==> onload 表示 xhr.readyState === 4 的时候，会触发onload事件
        xhr.addEventListener('load', () => {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.response)  // responseText
            } else {
                console.log('不成功')
            }
        })
        // xhr.onload = function(){
        //     // console.log(xhr.readyState)
        //     // 不需要再判断readyState === 4
        //     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
        //         console.log(xhr.response)  // responseText
        //     } else {
        //         console.log('不成功')
        //     }
        // }



        // 方式二 监听 readystatechange   推荐这个！！！
        // xhr.addEventListener('readystatechange', () => {
        //     if (xhr.readyState !== 4) return
        //     if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        //         console.log(xhr.response)  // responseText
        //     } else {
        //         console.log('不成功')
        //     }
        // })

    </script>
</body>

</html>